<%@ page
	import="org.codehaus.groovy.grails.web.servlet.GrailsApplicationAttributes"%>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><g:layoutTitle default="iSpider" /></title>
<meta name="description" content="ispider">
<meta name="author" content="">

<meta name="viewport" content="initial-scale = 1.0">

<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<r:require modules="scaffolding" />
<%--<link rel="stylesheet" href="../../FontAwesome/css/font-awesome.min.css">--%>
<link rel="stylesheet"
	href="${resource(dir: 'FontAwesome/css', file: 'font-awesome.min.css')}">
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<%--<link rel="stylesheet"
	href="${resource(dir: 'css', file: 'sticky.css')}">
--%>
<link rel="shortcut icon"
	href="${resource(dir: 'images', file: 'favicon.ico')}"
	class="icon-eye-open "
	type="image/x-icon">

<style type="text/css">
.marketing {
	text-align: center;
	color: #5a5a5a;
}

.formcenter {
	text-align: center;
}

.marketing h1 {
	margin: 60px 0 10px;
	font-size: 60px;
	font-weight: 200;
	line-height: 1;
	letter-spacing: -1px;
}

.marketing h2 {
	font-weight: 200;
	margin-bottom: 5px;
}

.marketing p {
	font-size: 16px;
	line-height: 1.5;
}

.mydiv {
	font-size: 18px;
	font-weight: 200;
	line-height: 30px;
	color: inherit;
	background-color: #eeeeee;
	padding: 10px;
	margin-bottom: 5px;
}

.gcsc-branding {
	display: none;
	!
	important
}
</style>
<style type="text/css">
 
#rotate {
 height:20px;
        right:0px;
        position:fixed;
        top:350px;
        width:120px;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	/* filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5); */
	-ms-transform: rotate(90deg);
}
</style>
<g:layoutHead />
<r:layoutResources />
</head>

<body>
 <a href="#feedbackModel" role="button" class="btn btn-info" data-toggle="modal" id="rotate">&nbsp;&nbsp;&nbsp;&nbsp;Feedback</a>
				
	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container-fluid">


				<a class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse"> <span class="icon-bar active">
					
					
					
					</span> <span
					class="icon-bar"></span> <span class="icon-bar"></span>
				</a> 
				
				<a class="brand active" style="color: white"  href="#"><i class="icon-eye-open "></i>
					&nbsp;Spider</a>
				
				<div class="nav-collapse">
				
					<ul class=" nav">
					<li class="divider-vertical"></li>
						<li <%= actionName == "index"  ? ' class="active"' : '' %>><g:link
								controller="search" action="index">
								${"Store Search "}
							</g:link></li>
							<li class="divider-vertical"></li>
						<li <%= actionName == "social" ? ' class="active"' : '' %>><g:link
								controller="search" action="social">
								${"Social Search"}
							</g:link></li>
						<%--
						    <li class="disabled" <%= actionName == "review"  ? ' class="active"' : '' %>><g:link class="disabled">${"Review"}<span class="label label-info">soon</span></g:link></li>
							<li class="divider-vertical"></li>
							<li class="disabled" <%= actionName == "deals"  ? ' class="active"' : '' %>><g:link>${" Deals" }<span class="label label-info">soon</span></g:link></li>
							<li class="divider-vertical"></li>
							<li <%= actionName == "about"  ? ' class="active"' : '' %>><g:link controller="search" action="about">${"About"}</g:link></li>--%>

					</ul>
				</div>
			</div>
		</div>
	</nav>
	
		

					<!-- Modal -->
					<div id="feedbackModel" class="modal hide fade" tabindex="-1"
						role="dialog" aria-labelledby="feedbackModelLabel"
						aria-hidden="true">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-hidden="true">×</button>
							<h3 id="feedbackModelLabel">
								<i class="icon-envelope-alt" style="vertical-align: middle;"
									align="middle"></i> &nbsp;&nbsp;Your comments
							</h3>
						</div>
						<div class="modal-body">

							<script type="text/javascript">
								var submitted = false;
							</script>
							<iframe name="hidden_iframe" id="hidden_iframe"
								style="display: none;"
								onload="if(submitted) {$('#feedbackModel').modal('hide');}"></iframe>

							<form
								action="https://docs.google.com/spreadsheet/formResponse?formkey=dHJkMmZWUTRDdHpTbDdYZ2pJMWZKdVE6MQ&amp;ifq"
								method="POST" id="ss-form" target="hidden_iframe"
								onsubmit="submitted=true;" class="form-horizontal">
								<div class="control-group">
									<div class="controls">
										<input type="text" name="entry.0.single" value=""
											class="ss-q-short" id="entry_0" placeholder="Name">

									</div>
								</div>
								<div class="control-group">
									<div class="controls">
										<input type="text" name="entry.2.single" value=""
											class="ss-q-short" id="entry_2" placeholder="Email">

									</div>
								</div>
								<div class="control-group">
									<div class="controls">
										<textarea name="entry.4.single" rows="8" cols="75"
											placeholder="your valuable feedback" class="ss-q-long"
											id="entry_4"></textarea>
									</div>
								</div>
								<div class="control-group">
									<div class="controls">
										<button class="btn btn-primary" data-dismiss="modal"
											aria-hidden="true">Close</button>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										<button type="submit" name="submit" class="btn btn-success">Submit</button>
									</div>
								</div>
							</form>
							<script type="text/javascript">
								(function() {
									var divs = document.getElementById(
											'ss-form').getElementsByTagName(
											'div');
									var numDivs = divs.length;
									for ( var j = 0; j < numDivs; j++) {
										if (divs[j].className == 'errorbox-bad') {
											divs[j].lastChild.firstChild.lastChild
													.focus();
											return;
										}
									}
									for ( var i = 0; i < numDivs; i++) {
										var div = divs[i];
										if (div.className == 'ss-form-entry'
												&& div.firstChild
												&& div.firstChild.className == 'ss-q-title') {
											div.lastChild.focus();
											return;
										}
									}
								})();
							</script>


						</div>
						<div class="modal-footer"></div>
					</div>
					<!-- Modal end -->
					
					
					<div class="container-fluid">
						<g:layoutBody />
                    </div>

	<hr>
	<nav style="bottom:0;width:100%;position:fixed;"  class="navbar-inverse">
		<div  class="navbar-inner">
		<footer class="footer">
				<p>
					<a style="margin-left: 46%" href="#">&copy; &nbsp;iSpider 2013</a>
				</p>
			</footer>
		</div>

	</nav>
	<r:layoutResources />
</body>
</html>